<template>
  <div class="container">
    <div class="map" id="map" ref="mapChartRef" :center="center" :zoom="zoom" :events="events" :plugin="plugin" :resizeEnable="true"></div>
    <el-amap-marker />
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getDeviceList } from "@/common/api";
import {getAssetsFile} from "@/utils/getAssetsFile.js"

export default {
  created() {

  },
  mounted() {
    this.initAMap();
    setInterval(() => {
      this.initData();
    }, 30000);
  },
  data() {
    return {
      AMap: {},
      map: {},
      center: [109.78, 39.61],//北京
      currentPoint: '',
      zoom: 8,
    };
  },
  props: {},
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "fce7a55b1f4308379202686521feb431",
      };
      AMapLoader.load({
        key: "409ad0041da6141fb6d54ab4e0d8f693", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      }).then((AMap) => {
        this.AMap = AMap;
        this.map = new AMap.Map("map", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: this.zoom, // 初始化地图级别
          center: this.center, // 初始化地图中心点位置
          mapStyle: "amap://styles/grey"
        });
        this.initData();
      }).catch((e) => {
        console.log(e);
      });
    },
    addMarker(item) {
      let lnglats = [item.lng, item.lat]
      let icon = ""
      if (item.status === '静止' && item.deviceType !== "jkwlw") {
        icon = new AMap.Icon({
          size: new AMap.Size(32, 32), // 设置图标大小
          image:getAssetsFile('truck_stop1.png'), // 设置图标样式
          imageOffset: new AMap.Pixel(0, 0), // 设置图标偏移
          imageSize: new AMap.Size(32, 32) // 设置图标尺寸
        });
      } else if (item.status === '行驶' && item.deviceType !== "jkwlw") {
        icon = new AMap.Icon({
          size: new AMap.Size(32, 32), // 设置图标大小
          image:getAssetsFile('truck_run1.png'), // 设置图标样式
          imageOffset: new AMap.Pixel(0, 0), // 设置图标偏移
          imageSize: new AMap.Size(32, 32) // 设置图标尺寸
        });
      } else if (item.status === '1' && item.deviceType !== "jkwlw") {
        icon = new AMap.Icon({
          size: new AMap.Size(32, 32), // 设置图标大小
          image:getAssetsFile('truck_offline1.png'), // 设置图标样式
          imageOffset: new AMap.Pixel(0, 0), // 设置图标偏移
          imageSize: new AMap.Size(32, 32) // 设置图标尺寸
        });
      } else if (item.status === '静止' && item.deviceType == "jkwlw") {
        icon = new AMap.Icon({
          size: new AMap.Size(32, 32), // 设置图标大小
          image:getAssetsFile('truck_stop.png'), // 设置图标样式
          imageOffset: new AMap.Pixel(0, 0), // 设置图标偏移
          imageSize: new AMap.Size(32, 32) // 设置图标尺寸
        });
      } else if (item.status === '行驶' && item.deviceType == "jkwlw") {
        icon = new AMap.Icon({
          size: new AMap.Size(32, 32), // 设置图标大小
          image:getAssetsFile('truck_run.png'), // 设置图标样式
          imageOffset: new AMap.Pixel(0, 0), // 设置图标偏移
          imageSize: new AMap.Size(32, 32) // 设置图标尺寸
        });
      } else if (item.status === '1' && item.deviceType == "jkwlw") {
        icon = new AMap.Icon({
          size: new AMap.Size(32, 32), // 设置图标大小
          image:getAssetsFile('truck_offline.png'), // 设置图标样式
          imageOffset: new AMap.Pixel(0, 0), // 设置图标偏移
          imageSize: new AMap.Size(32, 32) // 设置图标尺寸
        });
      }
      let marker = new AMap.Marker({
        icon,
        position: [lnglats[0], lnglats[1]],
        offset: new AMap.Pixel(-13, -30),
        angle: item.direction
      });
      marker.on('click', (e) => {
        this.openInfo(item)
      })
      marker.setMap(this.map);
    },
    initData() {
      this.map.clearMap();
      // 数据
      let A = {}
      getDeviceList(A).then((res) => {
        let list = res.data
        for (let i = 0; i < list.length; i++) {
          this.addMarker(list[i]);
        }
      });
    },
    //在指定位置打开信息窗体
    openInfo(item) {
      let lnglats = [item.lng, item.lat]
      //构建信息窗体中显示的内容
      var info = [];
      info.push(`
      <div style="width:446px">
      <p class="windowbm-info" style="color:#000">所在位置：<span class="window-info"  style="color:#000">${item.address || '暂无'}</span></p> <br/>
        <!--<p class="windowbm-info" style="color:#000">设备号：<span class="window-info" style="color:#000">${item.device}</span></p> <br/>-->
        <p class="winInfo" style="color:#000">车牌号：<span class="window-info" style="color:#000">${item.carNo}</span></p> <br/>
        <p class="winInfo" style="color:#000">定位时间：<span class="window-info" style="color:#000">${item.locateTime}</span></p> <br/>
        <p class="winInfo" style="color:#000">经 度：<span class="window-info" style="color:#000">${item.lng}</span></p> <br/>
        <p class="winInfo" style="color:#000">纬 度：<span class="window-info" style="color:#000">${item.lat}</span></p> <br/>
        <p class="winInfo" style="color:#000">速 度：<span class="window-info" style="color:#000">${item.speed}km/h</span></p> <br/>
        <a href="https://bs.yygylkj.com/waybillExt_DAPING?query=${item.carNo}&type=${item.deviceType}" class="detail" style="color:#0296CA" target="_blank" >查看详情</a>
        </div>
        `);
      let infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
        content: info.join("")  //使用默认信息窗体框样式，显示信息内容
      });
      infoWindow.open(this.map, [lnglats[0], lnglats[1]]);
    }
  },
  computed: {},
};
</script>

<style scoped>

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.map {
  height: 100%;
  width: 100%;
}

::v-deep .input-item {
  color: #000;

  a {
    color: #000;
  }
}
</style>
